<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="商户分账申请" name="first">
        <div class="main">
          <div style="width: 60%">
            <p>商户开通分账</p>
            <p>需进行审批，请您准备好审批材料后再进行分账申请。</p>
            <p>审批材料说明：1）分账协议；2）发生分账交易实际场景的真实照片</p>
            <p style="color: red">请注意：</p>
            <p style="color: red">
              （1）小微商户、复核不通过的商户不支持申请分账。
            </p>
            <p style="color: red">（2）复核不通过的商户不支持接收分账。</p>
            <p style="color: red">
              （3）分账发起方与分账接收方不能为相同法人或相同结算人。
            </p>
          </div>
          <div>
            <el-button type="primary" @click="handleBill">分账申请</el-button>
          </div>
        </div>
        <el-table :data="tableData" style="width: 100%; margin-top: 2rem;">
            <el-table-column prop="date" label="申请时间" width="120">
            </el-table-column>
            <el-table-column prop="name" label="状态" width="120">
            </el-table-column>
            <el-table-column prop="address" label="申请商户编号"> </el-table-column>
            <el-table-column prop="address" label="分账签约状态"> </el-table-column>
            <el-table-column prop="address" label="申请备注"> </el-table-column>
            <el-table-column prop="address" label="操作"> </el-table-column>
          </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="商户分账申请"
      :visible.sync="billDialog"
      width="80%"
      class="dialog"
    >
      <el-form
        :model="billForm"
        width="100%"
        :label-position="'right'"
        label-width="160px"
      >
        <div class="title">
          <p>注意事项:</p>
          <p>
            链接签约在分账申请提交成功后会为商户生成签约链接，需将链接转发至商户完成签约；
          </p>
          <p>
            短信签约会将签约链接以短信形式发送至商户联系人手机号中，商户通过点击链接完成签约；
          </p>
          <p>
            线下签约需商户使用我司提供分账协议模板，线下完成签署用印后上传至线下分账协议栏中；
          </p>
        </div>
        <el-row style="height: 0.3rem">
          <el-col :span="12" style="text-align: start">
            <el-form-item label="分账方商编：">
              <el-input size="small" style="width: 80%" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="text-align: start">
            <el-form-item label="最大分账比例(%):">
              <el-input size="small" style="width: 80%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="分账协议签署方式:">
            <el-radio-group v-model="billForm.radio">
              <el-radio :label="3">链接签约</el-radio>
              <el-radio :label="6">短信签约</el-radio>
              <el-radio :label="9">线下签约</el-radio>
            </el-radio-group>
            <el-button
              style="color: grey"
              type="text"
              icon="el-icon-refresh-right"
              @click="billForm.radio = ''"
              >重置</el-button
            >
          </el-form-item>
        </el-row>
        <div >分账接收方信息</div>

        <div class="box_1">
          <div style="text-align: end; width: 100% font-size:10px;">
            <el-button type="text">增加分账接收方</el-button>
            <el-button type="text" style="color: grey;" v-show="false">X</el-button>
          </div>
          <el-row style="height: 0.3rem">
            <el-col :span="12" style="text-align: start">
              <el-form-item label="分账接收方商编：">
                <el-input size="small" style="width: 80%" />
              </el-form-item>
            </el-col>
            <el-col :span="12" style="text-align: start">
              <el-form-item label="分账周期:">
                <el-input size="small" style="width: 80%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="height: 0.3rem">
            <el-col :span="12" style="text-align: start">
              <el-form-item label="双方关系:">
                <el-input size="small" style="width: 80%" />
              </el-form-item>
            </el-col>
            <el-col :span="12" style="text-align: start">
              <el-form-item label="分账场景说明:">
                <el-input size="small" style="width: 80%" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-form-item label="分账情况说明函:">
            <ss_uploadImg
              :fileList="fileList"
              :limit="6"
              :list-type="'picture-card'"
            ></ss_uploadImg>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="分账场景:">
            <ss_uploadImg
              :fileList="fileList"
              :limit="6"
              :list-type="'picture-card'"
              :description="'需上传发生分账交易实际场景的真实照片；'"
            ></ss_uploadImg>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="其他附件:">
            <ss_uploadImg
              :fileList="fileList"
              :limit="6"
              :list-type="'picture-card'"
              :description="'可上传除分账协议、分账场景外，可证明分账场景真实合理的其他材料；'"
            ></ss_uploadImg>
          </el-form-item>
        </el-row>
        <el-form-item label="备注(可选):">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="billForm.textarea"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">提交申请</el-button>
        <el-button @click="billDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ss_uploadImg from "./ss_uploadImg.vue";
export default {
  name: "billingAgreements",
  components: { ss_uploadImg },
  data() {
    return {
      activeName: "first",
      billDialog: false,
      billForm: {},
      fileList: [],
      tableData: [],
    };
  },
  methods: {
    handleClick() {},
    handleBill() {
      this.billDialog = true;
    },
    handleSubmit() {},
  },
};
</script>
<style lang="scss" scoped>
p {
  font-size: 14px;
  line-height: 0.5;
}
.main {
  display: flex;
  align-items: center;
  margin-top: 0.2rem;
}
.title {
  height: 7rem;
  background-color: #d3eef9;
  margin-bottom: 2rem;
  padding: 1rem;
  box-sizing: border-box;
  p {
    font-size: 12px;
    line-height: 0.5;
  }
}
::v-deep .el-form-item__content {
  line-height: 1;
  font-size: 12px;
}
::v-deep .label {
  font-weight: normal;
}
::v-deep .el-radio-group {
  margin-top: 0.4rem;
  margin-right: 1rem;
}
</style>
